<template>
    <!-- 常德自建库-首页模板-由于涉及到轮播组件,故无法使用子路由完成 -->
    <div class="main-box" id="scrollIndex">
        <!-- 顶部导航 -->
        <main-guide-bar
            class="guide-bar"
            @change="onGuideBarChange"
            :search-visible="searchVisible"
        />
        <!-- 走马灯,轮播图,用于显示大页面 -->
        <a-carousel
            class="carousel"
            ref="carousel"
            :before-change="afterCarouselChange"
            :dot-position="'right'"
        >
            <!-- 自定义指示器 -->
            <a
                class="carousel-custom-paging"
                slot="customPaging"
                slot-scope="props"
                :class="{active:props.i === activeGuideIndex}"
            ></a>
            <!-- 首页 -->
            <index-page class="carousel-item"/>
            <!-- 地方史志 -->
            <local-history class="carousel-item"/>
            <!-- 本地报纸 -->
            <local-newspaper class="carousel-item"/>
            <!-- 视频讲座 -->
            <video-lecture class="carousel-item"/>
            <!-- 精品图书 -->
            <excellent-books class="carousel-item"/>
            <!--数字期刊-->
            <digital-journal class="carousel-item"/>
            <!-- 数字资源 -->
            <digital-resources class="carousel-item"/>
            <!-- 服务指南 -->
            <service-guide class="carousel-item"/>
<!--            &lt;!&ndash; 关于我们 &ndash;&gt;-->
<!--            <about-us class="carousel-item"/>-->
        </a-carousel>
    </div>
</template>

<script>
import MainGuideBar from "../../components/MainGuideBar";
import {getTopicChild} from "../../api/CommonApi";
import IndexPage from "../../page/guides/Index"
import LocalHistory from "../../page/guides/LocalHistory";
import LocalNewspaper from "../../page/guides/LocalNewspaper";
import VideoLecture from "../../page/guides/VideoLecture";
import ExcellentBooks from "../../page/guides/ExcellentBooks";
import DigitalJournal from "../../page/guides/DigitalJournal";
import DigitalResources from "../../page/guides/DigitalResources";
import ServiceGuide from "../../page/guides/ServiceGuide";
// import AboutUs from "../../page/guides/AboutUs";


const INDEX_ITEM = {
    title:'首页',
    path:'/index',
    code:'home',
}

export default {
    name:"Main",
    components:{
        MainGuideBar,
        IndexPage,
        LocalHistory,
        LocalNewspaper,
        VideoLecture,
        ExcellentBooks,
        DigitalJournal,
        DigitalResources,
        ServiceGuide,
        // AboutUs
    },
    data(){
        return{
            // 导航栏列表
            guides:[],
            // 当前激活的导航栏的下标
            activeGuideIndex:0,
            //设置搜索框是否可见
            searchVisible:true
        }
    },

    watch:{
        $route(){
                this.setActiveIndexByRoute();
                if(this.activeGuideIndex === 0)  this.searchVisible = false;
                else this.searchVisible = true;
                this.$refs.carousel.goTo(this.activeGuideIndex)


        },
        activeGuideIndex(){
            if(this.activeGuideIndex === 0)  this.searchVisible = false;
            else this.searchVisible = true;

            let to = this.activeGuideIndex
            const activeItem = this.guides[to]
            console.log(this.activeGuideIndex)
            console.log(activeItem.path)

            if(activeItem.path === "/ServiceGuide") //服务指南
                this.$router.replace({path:activeItem.path, query:{code:'reader-intention'}})
            else if(activeItem.path === "/AboutUs")  //关于我们
                this.$router.replace({path:activeItem.path, query:{code:'library-introduce'}})
            else this.$router.replace({path:activeItem.path})
        }
    },
    created(){

        this.loadMainGuiderData("cd");
        if(this.activeGuideIndex === 0)  this.searchVisible = false;
        else this.searchVisible = true;

    },
    mounted () {
        window.addEventListener('mousewheel', this.handleScroll, false)
    },
    destroyed () {
        window.removeEventListener('mousewheel', this.handleScroll, false)
    },
    methods:{
        handleScroll (e) {
            let scrollTop = e.deltaY
            if(scrollTop > 120 && this.activeGuideIndex < 7){
                if((this.activeGuideIndex + 1) % 8 == 4)
                     this.activeGuideIndex = (this.activeGuideIndex + 2) % 8
                else this.activeGuideIndex = (this.activeGuideIndex + 1) % 8
                this.$refs.carousel.goTo(this.activeGuideIndex)
                this.setActiveIndexByRoute()

            }
            else if(scrollTop < -120 && this.activeGuideIndex > 0){
                if((this.activeGuideIndex - 1 + 8) % 8 == 4)
                    this.activeGuideIndex = (this.activeGuideIndex - 2 + 8) % 8
                else this.activeGuideIndex = (this.activeGuideIndex - 1 + 8) % 8
                this.$refs.carousel.goTo(this.activeGuideIndex)
                this.setActiveIndexByRoute()


            }
        },
        // 通过路由参数设置当前激活的轮播图
        setActiveIndexByRoute(){
            const path = this.$route.path
            // 获取当前路由
            const query = this.$route.query
            console.log(query)
            const list = this.guides
            let index = 0;
            for(let i = 0; i < list.length; i++){
                let item = list[i]
                // 判断当前所在的栏目
                console.log(item)
                if(item.path === path || path.indexOf(item.path) === 0){
                    index = i;
                    break;
                }
            }
            this.activeGuideIndex = index;
            this.$refs.carousel.goTo(index)
        },
        // 加载导航栏数据
        loadMainGuiderData(topicCode){
            console.log(topicCode)
            getTopicChild(topicCode).then(res => {
                console.log("Main : ", res)
                const result = res.result || []
                // 填充首页
                result.unshift(INDEX_ITEM)
                this.guides = result
                this.setActiveIndexByRoute()
            }).catch(() => {
                this.setActiveIndexByRoute()
            })
        },
        // 轮播图改变后
        afterCarouselChange(from,to){

                this.activeGuideIndex = to
                const activeItem = this.guides[to]

                if(activeItem.path === "/ServiceGuide") //服务指南
                    this.$router.replace({path:activeItem.path, query:{code:'reader-intention'}})
                else if(activeItem.path === "/AboutUs")  //关于我们
                    this.$router.replace({path:activeItem.path, query:{code:'library-introduce'}})
                else this.$router.replace({path:activeItem.path})


        },
        // 通过导航栏切换栏目时
        onGuideBarChange(index,item){
            console.log('change guide bar',index,item)
            // 切换轮播图
            this.activeGuideIndex = index;
            this.$refs.carousel.goTo(index)


        },
    }
}
</script>

<style lang="less" scoped>
@media only screen and (max-width:576px){
    .main-box{
        @width:100vw;
        @min-height:100vh;
        @guide-bar-height:6vh;
        width:@width;
        min-height:@min-height;
        .guide-bar{
            width:100%;
            height:@guide-bar-height;
            position:absolute;
            top:0;
            z-index:10;
        }
        /** 走马灯,轮播图 */
        .carousel{
            width: @width;
            min-height: @min-height;
            overflow: hidden;
            z-index: 1;
        }
        /** 轮播图分页指示器 */
        /deep/.slick-dots{
            margin-right:4vw;
            top: auto;
            bottom: 0;
            transform: translateY(-6vw);
            li{
                margin: 1vw 0;
            }
            .carousel-custom-paging{
                width: 4vw;
                height: 4vw;
                background: #AAA;
                border-radius: 50%;
                display:inline-block;
                &.active{
                    background: rgba(169, 216, 255, 1);
                }
            }
        }
        /** 轮播图内容 */
        .carousel-item{
            width: @width;
            min-height: @min-height;
            overflow:auto;
        }
    }
}

//pc
@media only screen and (min-width: 576px){
    @min-width:1220px;
    .main-box{
        display:flex;
        flex-direction: column;
        overflow: auto;
        position: relative;
        min-width:@min-width;
        .guide-bar{
            width:100%;
            height:60px;
            position:absolute;
            z-index:10;
            overflow: hidden;

        }
        /** 走马灯,轮播图 */
        .carousel{
            //position:relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            z-index: 1;
        }
        /** 轮播图分页指示器 */
        /deep/.slick-dots{
            margin-right:30px;
            li{
                margin: 5px 0;
            }
            .carousel-custom-paging{
                width: 20px;
                height: 20px;
                background: #AAA;
                border-radius: 50%;
                display:inline-block;
                &.active{
                    background: rgba(169, 216, 255, 1);
                }
            }
        }
        /** 轮播图内容 */
        .carousel-item{
            width: 100%;
            height: 100vh;
            overflow:auto;
        }
    }

}

</style>
